import React, { ReactElement, useContext } from 'react';
import { View, Text, TextInput, ScrollView } from 'react-native';

import styles from './style';
import Button from '../../../../components/Button';
import FastImage from '../../../../components/FastImage';
import { grayRightArrow } from '../../../../constant/resource';
import {
  backAlert,
  setReceiverName,
  setReceiverPhone,
  setDetailAddress,
  showPicker,
  sureSave
} from '../../actions';
import { Store } from '../../reducer';
import { isIOS } from '../../../../constant';
import NavBar from '../../../../components/NavBar';

export default (): ReactElement => {
  const { state } = useContext(Store);
  const { receiverName, receiverMobilePhone, detail, districtInfo } = state;

  return (
    <View style={styles.container}>
      <NavBar
        title="添加收件信息"
        backAction={backAlert}
        rightText="保存"
        rightAction={sureSave}
      />
      <ScrollView
        keyboardDismissMode="on-drag"
        contentContainerStyle={styles.itemContainer}
      >
        <View
          style={[
            styles.content,
            {
              borderTopWidth: 0,
              borderTopColor: 'transparent'
            }
          ]}
        >
          <Text style={styles.prefix}>收件人</Text>
          <TextInput
            allowFontScaling={false}
            placeholderTextColor="#8F95A2"
            style={styles.input}
            placeholder="请填写收件人姓名"
            value={receiverName}
            onChangeText={setReceiverName}
            onBlur={(): void => {}}
            maxLength={16}
          />
          <View style={styles.line} />
        </View>

        <View style={styles.content}>
          <Text style={styles.prefix}>手机号码</Text>
          <TextInput
            allowFontScaling={false}
            placeholderTextColor="#8F95A2"
            style={styles.input}
            placeholder="请填写收件人手机号码"
            value={receiverMobilePhone}
            keyboardType={isIOS ? 'default' : 'number-pad'}
            onChangeText={setReceiverPhone}
            maxLength={11}
            onBlur={(): void => {}}
          />
          <View style={styles.line} />
        </View>

        <Button style={styles.content} onPress={showPicker}>
          <Text style={styles.prefix}>所在地区</Text>
          {districtInfo.length > 0 ? (
            <Text style={styles.district} numberOfLines={1}>
              {districtInfo.join(' ')}
            </Text>
          ) : (
            <Text style={styles.districtDisable}>请选择收货所在地</Text>
          )}
          <FastImage source={grayRightArrow} style={styles.arrow} />
          <View style={styles.line} />
        </Button>

        <View style={styles.address}>
          <Text style={styles.addressPrefix}>详细地址</Text>
          <TextInput
            allowFontScaling={false}
            multiline
            placeholderTextColor="#8F95A2"
            style={styles.addressInput}
            placeholder="请填写街道门牌信息"
            value={detail}
            onChangeText={setDetailAddress}
            onBlur={(): void => {}}
          />
        </View>
      </ScrollView>
    </View>
  );
};
